<script lang="ts" setup>
import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page } from '@vben/common-ui';

import { Button, Tag } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getTenderList } from '#/api';
import { tagType } from '#/utils/bid';

const gridOptions: VxeGridProps<App.Http.Resources.TenderItem> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    {
      field: 'regions',
      slots: { default: 'regions' },
      title: '地区',
      align: 'left',
      width: 180,
    },
    {
      field: 'title',
      title: '标题',
      minWidth: 200,
      showOverflow: 'tooltip',
      align: 'left',
    },
    {
      field: 'type.name',
      title: '状态',
      width: 100,
    },
    {
      title: '标签',
      field: 'tags',
      minWidth: 150,
      maxWidth: 300,
      slots: { default: 'tags' },
    },
    {
      field: 'publish_date',
      formatter: 'formatDate',
      title: '发布日期',
      width: 150,
    },
    {
      title: '关联项目',
      field: 'project_id',
    },
    {
      cellRender: { name: 'CellLink', props: { text: '编辑' } },
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 120,
    },
  ],
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        return await getTenderList({
          page: {
            number: page.currentPage,
            size: page.pageSize,
          },
        });
      },
    },
  },
  showOverflow: false,
};

const [Grid] = useVbenVxeGrid({ gridOptions });
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #regions="{ row }">
        {{
          row.regions
            .map((region) =>
              region.short_name ? region.short_name : region.name,
            )
            .join(' - ')
        }}
      </template>
      <template #tags="{ row }">
        <div class="flex flex-wrap justify-center gap-2">
          <Tag
            :theme="tagType(tag.id)"
            v-for="tag in row.tag.project_type"
            :key="tag.id"
          >
            {{ tag.name }}
          </Tag>
        </div>
      </template>
      <template #action>
        <Button variant="text">编辑</Button>
      </template>
    </Grid>
  </Page>
</template>
